<template>
  <view class="myInfo">
    <form report-submit="true" @submit="formSubmit">
      <view class="personal-data borderPad">
        <view class="list borRadius14">
          <view class="item acea-row">
            <view>头像</view>
            <!-- #ifndef MP -->
            <view class="pictrue" @click.stop="uploadpic">
              <image :src="userInfo.avatar" />
              <image :src="editPng" class="alter" />
            </view>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <view class="pictrue">
              <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                <image class="avatar" :src="userInfo.avatar" />
              </button>
              <image :src="editPng" class="alter" />
            </view>
            <!-- #endif -->
          </view>
          <view class="item acea-row">
            <view>昵称</view>
            <view class="input fontColor">
              <!-- #ifndef MP -->
              <input type="text" name="nickname" :value="nickname" maxlength="20">
              <!-- #endif -->
              <!-- #ifdef MP -->
              <input type="nickname" name="nickname" :value="userInfo.nickname" class="weui-input" placeholder="请输入昵称">
              <!-- #endif -->
            </view>
          </view>
          <view class="item acea-row">
            <view>性别</view>
            <view class="input">
              <picker :value="sexindex" :range="sexList" range-key="name" @change="bindSexChange">
                <view class="uni-input">{{ sexList[sexindex].name }}</view>
              </picker>
            </view>
          </view>
          <view class="item acea-row">
            <view>出生日期</view>
            <view class="input">
              <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
                <view class="uni-input">{{ date }}</view>
              </picker>
            </view>
          </view>
          <view class="item acea-row">
            <view>地区</view>
            <view class="input">
              <picker mode="multiSelector" :value="cityIndex" :range="cityData" @change="bindCityChange" @columnchange="selMonitor">
                <view class="uni-input">{{ addressNode.province&&addressNode.city ? addressNode.province + ' , ' + addressNode.city : '-' }}
                </view>
              </picker>
            </view>
          </view>
        </view>
        <button class="modifyBnt bg_color" formType="submit">保存修改</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      memberInfo: {
        avatar: ''
      },
      userIndex: 0,
      wechat: false,
      theme: 'app.globalData.theme',
      editPng: '../../../static/images/alert1.png',
      sexList: [{
        val: 0,
        name: '未知'
      },
      {
        val: 1,
        name: '男'
      },
      {
        val: 2,
        name: '女'
      },
      {
        val: 3,
        name: '保密'
      }
      ],
      sexindex: 0,
      date: '',
      sex: 0,
      cityData: 'city',
      cityIndex: 0,
      addressNode: {
        province: '请选择城市',
        city: ''
      },
      provinceList: [],
      cityAllList: [],
      avatarUrl: '',
      nickname: ''
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLogin() {
      return this.$store.getters.hasLogin
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  onLoad() {
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
  .myInfo {
    font-size: 28rpx;
    background-color: #f5f5f5;
    color: #333;
  }

  .fontColor {
    color: #868686;
  }

  .personal-data .wrapper {
    margin: 10rpx 0;
    background-color: #fff;
    padding: 36rpx 30rpx 13rpx 30rpx;
  }

  .personal-data .wrapper .title {
    margin-bottom: 30rpx;
    font-size: 32rpx;
    color: #282828;
  }

  .personal-data .wrapper .wrapList .item {
    width: 690rpx;
    height: 160rpx;
    background-color: #f8f8f8;
    border-radius: 20rpx;
    margin-bottom: 22rpx;
    padding: 0 30rpx;
    position: relative;
    border: 2rpx solid #f8f8f8;
    box-sizing: border-box;
  }

  .personal-data .wrapper .wrapList .item.on {
    border-color: #e93323;
    border-radius: 20rpx;
    background-image: url('');
    background-size: 100% 100%;
    background-color: #fff9f9;
    background-repeat: no-repeat;
  }

  .personal-data .wrapper .wrapList .item .picTxt {
    width: 445rpx;
  }

  .personal-data .wrapper .wrapList .item .picTxt .pictrue {
    width: 96rpx;
    height: 96rpx;
    position: relative;
  }

  .personal-data .wrapper .wrapList .item .picTxt .pictrue image,
  .pictrue button {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .personal-data .wrapper .wrapList .item .picTxt .text {
    width: 325rpx;
  }

  .personal-data .wrapper .wrapList .item .picTxt .text .name {
    width: 100%;
    font-size: 30rpx;
    color: #282828;
  }

  .personal-data .wrapper .wrapList .item .picTxt .text .phone {
    font-size: 24rpx;
    color: #999;
    margin-top: 10rpx;
  }

  .personal-data .wrapper .wrapList .item .bnt {
    font-size: 24rpx;
    background-color: #fff;
    border-radius: 27rpx;
    width: 140rpx;
    height: 54rpx;
    border: 2rpx solid #e93323;
  }

  .personal-data .wrapper .wrapList .item .currentBnt {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 26rpx;
    background-color: rgba(233, 51, 35, 0.1);
    width: 140rpx;
    height: 48rpx;
    border-radius: 0 20rpx 0 20rpx;
  }

  .personal-data .list {
    margin-top: 30rpx;
    background-color: #fff;
  }

  .personal-data .list .item {
    @include flex-space-between;
    border-bottom: 1rpx solid #f2f2f2;
    padding: 24rpx;
    font-size: 32rpx;
    color: #333333;
  }

  .personal-data .list .item .phone {
    width: 160rpx;
    height: 56rpx;
    font-size: 24rpx;
    color: #fff;
    line-height: 56rpx;
    border-radius: 32rpx;
  }

  .personal-data .list .item .pictrue {
    width: 80rpx;
    height: 80rpx;
    position: relative;
  }

  .personal-data .list .item .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .personal-data .list .item .pictrue .alter {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .personal-data .list .item .input {
    width: 415rpx;
    text-align: right;
    color: #666666;
  }

  .personal-data .list .item .input .id {
    width: 365rpx;
  }

  .personal-data .list .item .input .iconfont {
    font-size: 35rpx;
  }

  .personal-data .modifyBnt {
    font-size: 32rpx;
    color: #fff;
    width: 690rpx;
    height: 90rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 90rpx;
    margin: 76rpx auto 0 auto;
    background-color: #e93323;
  }

  .personal-data .logOut {
    font-size: 32rpx;
    text-align: center;
    width: 690rpx;
    height: 90rpx;
    border-radius: 45rpx;
    margin: 30rpx auto 0 auto;
  }
</style>
